<template>
  <div id="admin" class="container">
    <h3 class="title"><span />帐号列表</h3>
    <el-button
      type="primary"
      class="add five"
      style="margin-bottom:20px"
      icon="el-icon-plus"
      size="small"
      @click="open"
    >新增管理员</el-button>
    <el-table
      :data="tableData"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="120px"
      />
      <el-table-column
        prop="account"
        label="帐号名称"
      />
      <el-table-column
        prop="name"
        label="昵称"
      />
      <el-table-column
        prop="accountsState"
        label="帐号状态"
        width="160px"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="2"
            active-text="正常"
            inactive-text="禁用"
            active-color="#f84311"
            inactive-color="rgba(0,0,0,0.2)"
            :disabled="(scope.row.group == 1)?true:false"
            @change="disableUser(scope.row)"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="role"
        label="角色"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.role }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <span v-if="scope.row.group == 1">/</span>
          <span v-else>
            <el-button class="edit" size="mini" @click="goEdit(scope.row)">编辑</el-button>
            <el-button class="dele" size="mini" @click="goDel(scope.row)">删除</el-button>
          </span>

        </template>
      </el-table-column>
    </el-table>
    <BouncedDialog :title="adminForm.id?'编辑管理员':'添加管理员'" :dialog-show.sync="dialogAdmin" :width="50" class="dialog">
      <el-form ref="adminForm" :model="adminForm" inline :rules="adminRules" label-width="70px">
        <el-form-item label="账号：" prop="account">
          <el-input v-model="adminForm.account" placeholder="请依照这种格式XXX@XXX.COM" />
        </el-form-item>
        <el-form-item label="密码：" :prop="adminForm.id?'':'password'">
          <el-input v-model="adminForm.password" type="password" />
        </el-form-item>
        <el-form-item label="昵称：" prop="name">
          <el-input v-model="adminForm.name" />
        </el-form-item>
        <el-form-item label="角色：" prop="role">
          <el-select v-model="adminForm.role" multiple placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="adminForm.status" placeholder="请选择">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="2" />
          </el-select>
        </el-form-item>
        <div class="btn">
          <el-button @click="dialogAdmin = false">取 消</el-button>
          <el-button type="primary" @click="submitAdmin()">确 定</el-button>
        </div>
      </el-form>
    </BouncedDialog>
    <el-pagination
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :hide-on-single-page="page.total<page.size?true:false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import adminApi from '@/api/admin.js'
import websiteApi from '@/api/website.js'
// import rolesApi from '@/api/roles'
var token = localStorage.getItem('token')
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      // myHeaders: { Authorization: token },
      // imageUrl: '',
      tableData: [],
      searchForm: {},
      dialogAdmin: false,
      options: [], // 角色
      name: '', // 暂存管理员姓名
      adminForm: {
        account: '',
        password: '',
        name: '',
        role: [],
        id: ''
      }, // 新增管理员表单
      adminRules: {
        account: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        role: [{ required: true, message: '请选择角色', trigger: 'change' }]
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {}
    }
  },
  created() {
    this.getList()
    // this.getwebList()
  },
  updated() {

  },
  methods: {
    disableUser(row) {
      adminApi.adminInfo({ id: row.id }).then(res => {
        const admin = res.data

        const roles = []
        admin.role.forEach(el => {
          roles.push(el.id)
        })
        this.adminForm = {
          name: admin.name,
          account: admin.account,
          id: admin.id,
          status: row.status,
          role: roles
        }
        adminApi.adminUpdate(this.adminForm).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    // getwebList() {
    //   this.val.page = this.page.currentPage
    //   this.val.limit = this.page.size
    //   websiteApi.webList(this.val).then(res => {
    //   })
    // },
    // 获取管理员列表
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.account = this.searchForm.account
      adminApi.adminList(this.val).then(res => {
        this.tableData = res.data
        this.page.total = res.count
      })
    },
    // 获取角色列表
    getRolesList() {
      adminApi.roleList().then(res => {
        // 不展示超级管理员角色 role_id = 1
        const list = res.data
        list.forEach((res, index) => {
          if (res.id == 1) {
            list.splice(index, 1)
          }
        })
        this.options = list
      })
    },
    // 新增
    open() {
      this.dialogAdmin = true
      this.getRolesList()
      this.adminForm = {
        account: '',
        password: '',
        name: '',
        role: [],
        id: '',
        status: 1
      }
    },
    // 管理员详情
    getAdminInfo(row) {
      adminApi.adminInfo({ id: row.id }).then(res => {
        const admin = res.data
        const roles = []
        admin.role.forEach(el => {
          roles.push(el.id)
        })

        this.adminForm = {
          name: admin.name,
          account: admin.account,
          id: admin.id,
          status: admin.status,
          role: roles
        }

        this.dialogAdmin = true
      })
    },
    // 编辑
    goEdit(row) {
      this.getRolesList()
      this.getAdminInfo(row)

      // this.adminForm.id = row.id
      // this.adminForm.account = row.account
      // this.adminForm.role = [1, 2]
      // this.adminForm.name = row.name
      // this.adminForm.status = row.status
      // this.adminForm.password = ''
    },
    // 提交
    submitAdmin() {
      this.$refs.adminForm.validate((valid) => {
        if (valid) {
          if (!this.adminForm.id) {
            adminApi.adminSave({
              ...this.adminForm
            }).then((res) => {
              if (res.code === 0) {
                this.$message.success(res.msg)
                this.dialogAdmin = false
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            adminApi.adminUpdate({ ...this.adminForm }).then((res) => {
              if (res.code === 0) {
                this.$message.success(res.msg)
                this.dialogAdmin = false
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.warning('请填写必要信息')
        }
      })
    },

    // 删除
    goDel(row) {
      this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adminApi.adminDelete({ id: row.id }).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索
    search() {
      this.$refs.searchForm.validate((valid) => {
        this.page.currentPage = 1
        this.getList()
      })
    },

    // 重置搜索框
    reset(searchForm) {
      this.searchForm = {
        account: ''
      }
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }
  }
}
</script>
<style lang='scss'>
#admin{
  .el-form-item{
    width: 100%;
  }
  .el-form-item__content{
    width: calc(100% - 80px);
    .el-select{
      width:calc(100%);
    }
  }
}
</style>
<style lang="scss" scoped>
.el-table{
  margin-bottom: 20px;
}
.search{
    background-color: #fff;
    padding: 15px 10px;
    margin-bottom: 10px;
    .el-form-item{
        margin-bottom: 0;
    }
    .el-button {
        font-size: 14px;
    }
}
.btn{
  text-align: center;
}
</style>
